<template>
  <div>
    <el-form label-width="100" style="max-width: 300px" label-position="left">
      <el-form-item label="公司名称:">
        <el-col :span="18"> <el-input v-model="set_value"></el-input></el-col>
        <el-col :span="3"></el-col>
        <el-col :span="3"
          ><el-button type="primary" size="default" @click="updateCompanyName"
            >保存</el-button
          ></el-col
        >
      </el-form-item>
      <el-form-item label="公司介绍:">
        <el-button type="success" size="default" @click="openEditor(1)">编辑公司介绍</el-button>
      </el-form-item>
      <el-form-item label="公司架构:">
        <el-button type="success" size="default" @click="openEditor(2)">编辑公司架构</el-button>
      </el-form-item>
      <el-form-item label="公司战略:">
        <el-button type="success" size="default" @click="openEditor(3)">编辑公司战略</el-button>
      </el-form-item>
      <el-form-item label="公司高层:">
        <el-button type="success" size="default" @click="openEditor(4)">编辑高层介绍</el-button>
      </el-form-item>
    </el-form>
    <editor ref="editRef"></editor>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import editor from '@/components/editor.vue'
import { getCompanyNameAPI, updateCompanyNameAPI } from '@/api/company'
import { bus } from '@/utils/mitt'
import { tracking } from '@/utils/operation'

const userInfo = JSON.parse(localStorage.getItem('UserInfo')!).UserInfo
// 编辑器实例
const editRef = ref()
// 公司名称
const set_value = ref<string>('')
// 修改公司信息
const openEditor = async (id: number) => {
  bus.emit('editorTitle', id)
  editRef.value.open()
}

// 获取公司名称
const getCompanyName = async () => {
  const res = await getCompanyNameAPI()
  set_value.value = res.data!
}
// 修改公司名称
const updateCompanyName = async () => {
  await updateCompanyNameAPI(set_value.value)
  /** 记录操作 */
  tracking('', userInfo?.name, '公司信息', '中级', `修改公司名称`)
  ElMessage({ type: 'success', message: '修改成功' })
}

onMounted(() => {
  getCompanyName()
})
</script>

<style scoped lang="scss">
.avatar-uploader .avatar {
  width: 168px;
  height: 168px;
  display: block;
}
</style>
